<!DOCTYP html>
<html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
	.table{
		border-collapse: collapse;
		width: 100%;
    	margin-bottom: 10px;
	}
	.table tr{
		display:block;
	}
	.table tr td{
		width:20%;
	}
	.table thead tr{
		background-color: white;
	    color: #080808;
	    background: #eee;
	    border-top: 1px solid #aaa;
	    border-bottom: 1px solid #a7a7a7;
	    height: 40px;
	    line-height: 40px;
	}
	.table tbody tr{
	    height: 40px;
	    line-height: 40px;
	    border-bottom: 1px dashed #d8d8d6;
	    cursor:move;
	}

	</style>
</head>
<body>

	<div>
		<table class="table">
			<thead>
				<tr>
					<td><input type="checkbox"/></td>
					<td>name</td>
					<td>age</td>
					<td>type</td>
					<td>version</td>
				</tr>
			</thead>
			<tbody id="tbody">
				<tr>
					<td><input type="checkbox"/></td>
					<td>david</td>
					<td>000</td>
					<td>HT</td>
					<td>1.0.0</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>dasy</td>
					<td>111</td>
					<td>HMM</td>
					<td>1.2.0</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>clarise</td>
					<td>222</td>
					<td>type</td>
					<td>2.0.0</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>sandy</td>
					<td>333</td>
					<td>DS</td>
					<td>2.0.1</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>sandy</td>
					<td>4444</td>
					<td>DS</td>
					<td>2.0.1</td>
				</tr>
			</tbody>
		</table>
	</div>
    <button id="btn1" onclick="startDarg()">start Drag</button>
    <button id="btn2" onclick="unDrag()">stop Drag</button>
</body>
</html>
<script type="text/javascript" src="wDragger.js"></script>
<script type="text/javascript">
var drag;
var startDarg = function(){
	drag = new wDragger({
		container:document.getElementById("tbody"),
		dragElement:"tr",
		dragElementStyle:{"background-color":"#ccc","opacity":"0.4"},
		nonElement:"INPUT"
	});
}
var unDrag = function(){
	drag.unDrag();
}
</script>